<template>
  <div>
    <!-- 我的频道 -->
    <div class="my-channel-box">
      <div class="channel-title">
        <span><strong>已添加频道: </strong><span class="small"> 点击进入频道</span></span>
        <span class="circle" @click="show=!show">{{show?'完成':'编辑'}}</span>
      </div>
      <!-- 我的频道列表 -->
      <van-row type="flex">
        <van-col
          span="6"
          v-for="item,index in userChannelsList"
          :key="item.id"
          @click="delFnn(item,index)"
        >
          <div class="channel-item van-hairline--surround">
            {{item.name}}
            <!-- 删除的徽标 -->
            <van-badge
              color="transparent"
              class="cross-badge"
              v-if="show&&item.id!==0"
            >
              <template #content>
                <van-icon
                  name="cross"
                  class="badge-icon"
                  color="#cfcfcf"
                  size="0.32rem"
                />
              </template>
            </van-badge>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 更多频道 -->
    <div class="more-channel-box">
      <div class="channel-title">
        <span><strong>可添加频道：</strong><span class="small"> 点击添加频道</span></span>
      </div>
      <!-- 更多频道列表 -->
      <van-row type="flex">
        <van-col span="6" v-for="item in unChannelList" :key="item.id" @click="addFn(item)">
          <div class="channel-item van-hairline--surround">
            {{item.name}}
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { allChannelsListAPI, updateChannelsAPI } from '@/api'
export default {
  props: {
    userChannelsList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  async created () {
    // 获取所有频道列表数据
    const res = await allChannelsListAPI()
    this.allChannelsList = res.data.data.channels
  },
  data () {
    return {
      allChannelsList: [], // 所有频道列表数据
      show: false// 控制每个频道上面的×号显示与否
    }
  },
  computed: {
    // 用户未选中的频道数据
    unChannelList () {
      return this.allChannelsList.filter(item => {
        const res = this.userChannelsList.findIndex(obj => {
          return obj.id === item.id
        })
        if (res === -1) {
          return true
        } else {
          return false
        }
      })
    }
  },
  methods: {
    // 更新已选频道数据处理
    yuFn () {
      // 把用户已选频道数组实现深拷贝
      const arr = []
      this.userChannelsList.forEach(item => {
        const newObj = { ...item }
        arr.push(newObj)
      })
      // 对arr操作,发送请求参数
      arr.forEach((item, index) => {
        delete item.name
        item.seq = index + 1
      })
      // 更新用户已选频道
      updateChannelsAPI({
        channels: arr
      })
    },
    addFn (item) {
      // 把点击的频道添加到用户已选频道数组中
      this.userChannelsList.push(item)
      this.yuFn()
    },
    delFnn (item, i) {
      // 点击删除用户已选频道
      if (this.show === true && item.name !== '推荐') {
        this.userChannelsList.splice(i, 1)
        this.yuFn()
      }
      if (this.show === false) {
        // 点击进入频道
        this.$emit('intoChannel', item)
        // 关闭弹出层
        this.$emit('closeP')
      }
    }
  }
}
</script>

<style scoped lang="less">
.van-popup,
.popup-container {
  background-color: transparent;
  height: 100%;
  width: 100%;
}

.popup-container {
  display: flex;
  flex-direction: column;
}

.pop-header {
  height: 90px;
  background-color: #007bff;
  color: white;
  text-align: center;
  font-size: 14px;
  position: relative;
  .title {
    width: 100%;
    position: absolute;
    bottom: 15px;
  }
}

.pop-body {
  flex: 1;
  overflow: scroll;
  padding: 8px;
  background-color: white;
}

.my-channel-box,
.more-channel-box {
  .channel-title {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 28px;
    padding: 0 6px;
  }
}

.channel-item {
  font-size: 12px;
  text-align: center;
  line-height: 36px;
  background-color: #fafafa;
  margin: 5px;
}

/*删除的微标 */
.cross-badge {
  position: absolute;
  right: -3px;
  top: 0;
  border: none;
}

/*提示文字 */
.small_title {
  font-size: 12px;
  color: gray;
}
.small{
font-size: 12px;
color: #aaa;
}
.circle{
  border: 1px solid gray;
  padding-left:5px ;
  padding-right:5px ;
  border-radius: 5px;
  font-size: 12px;
}
</style>
